<template>
  <div class="img-card" @click="searchIdx(idx)" :style="{marginTop:top}">
    <span class="tag" v-if="playCount">
      <i class="card cardbofang iconfont iconyousanjiao"></i>
      <span>{{playCount | setPlayCount}}</span>
    </span>
    <span class="fine-tag" v-if="fine">
      <i class="card cardhuangguan"></i>
    </span>
    <div class="img-con">
      <span class="time-tag" v-if="updateTime">{{ updateTime }}</span>
      <div class="shadow"></div>
      <!-- 增加key属性，是可以动态切换图片，解决了在none到block时不能正确显示 -->
      <img v-lazy="imgUrl + '?param=200y200'" :key="imgUrl" class="image" />
      <span class="dj-name" v-show="type === 'dj'">{{name}}</span>
      <!-- 跳转到专辑详情页 -->
      <!-- <router-link class="cover"  @click="toAlbum(albumId)" :to="'/albumPage/'+albumId"></router-link> -->
    </div>
    <div class="dec" :class="{lines:lines === 'one',twoLines:lines === 'two'}">{{ dec }}</div>
    <div class="artists" v-if="artists">
      <span v-for="(item, index) in artists" :key="index" class="artist">{{ item.name }}</span>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  props: {
    playCount: {
      type: Number
    },
    updateTime: {
      type: String
    },
    imgUrl: {
      type: String
    },
    dec: {
      type: String
    },
    type: {
      type: String
    },
    name: {
      type: String
    },
    width: {
      type: String,
      default: "2.8rem"
    },
    lines: {
      type: String,
      default: "two"
    },
    artists: {
      type: Array
    },
    top: {
      type: String,
      default: "0.3rem"
    },
    // 如果是轮播图，则显示大播放按钮
    swiper: {
      type: Boolean,
      default: false
    },
    fine: {
      type: Boolean,
      default: false
    },
    albumId: {
      type: Number
    },
    dishId: {
      type: Number
    },
    ridId: {
      type: Number
    },
    idx: {
      type: String
    }
  },
  filters: {
    setPlayCount: function(val) {
      if (!val) {
        return "";
      }
      if (val > 100000000) {
        val = (val / 100000000).toFixed(1) + "亿";
      } else if (val > 10000) {
        val = Math.floor(val / 10000) + "万";
      }
      return val;
    }
  },
  methods: {
    /**
     * 给图片卡片注册点击事件
     *
     * 当没有idx时，查看是否有albumId，如果有跳转歌单页面
     * 如果有idx时说明是排行榜页面，跳转到排行榜页面
     */
    searchIdx(idx) {
      if (!idx) {
        if (this.albumId) {
          // [vue-router] Route with name 'albumPage' does not exist
          // 需要给路由设置name
          // 并且这个路由在配置的时候不能加 /:id
          this.$router.push({
            name: "albumPage",
            params: { albumId: this.albumId }
          });
          // this.$router.push(`/albumPage/${this.albumId}`)
          return;
        }
        if (this.dishId) {
          this.$router.push({
            name: "albumPage",
            params: { dishId: this.dishId }
          });
          return;
        }
        if (this.ridId) {
          console.log("go");

          this.$router.push({
            name: "djDetailPage",
            params: { ridId: this.ridId }
          });
          return;
        }
        return;
      }
      switch (idx) {
        case "云音乐新歌榜":
          idx = 0;
          break;
        case "云音乐热歌榜":
          idx = 1;
          break;
        case "网易原创歌曲榜":
          idx = 2;
          break;
        case "云音乐飙升榜":
          idx = 3;
          break;
        case "云音乐说唱榜":
          idx = 23;
          break;
        case "云音乐ACG音乐榜":
          idx = 22;
          break;
        case "KTV唛榜":
          idx = 7;
          break;
        case "iTunes榜":
          idx = 8;
          break;
        case "日本Oricon周榜":
          idx = 10;
          break;
        case "Hit FM Top榜":
          idx = 9;
          break;
        case "台湾Hito排行榜":
          idx = 20;
          break;
        case "Beatport全球电子舞曲榜":
          idx = 21;
          break;
        case "法国 NRJ Vos Hits 周榜":
          idx = 20;
          break;
        case "云音乐国电榜":
          idx = 4;
          break;
        case "UK排行榜周榜":
          idx = 5;
          break;
        case "美国Billboard周榜":
          idx = 6;
          break;
        case "云音乐古典音乐榜":
          idx = 24;
          break;
        case "云音乐电音榜":
          idx = 25;
          break;
        case "抖音排行榜":
          idx = 26;
          break;
        case "新声榜":
          idx = 27;
          break;
        case "云音乐韩语榜":
          idx = 28;
          break;
        case "英国Q杂志中文版周榜":
          idx = 29;
          break;
        case "电竞音乐榜":
          idx = 30;
          break;
        case "云音乐欧美热歌榜":
          idx = 31;
          break;
        case "云音乐欧美新歌榜":
          idx = 32;
          break;
        case "说唱TOP榜":
          idx = 33;
          break;
      }
      this.$emit("showIdxPage", idx);
    }
  }
};
</script>

<style lang="less" scoped>
.img-card {
  position: relative;
  width: 31%;
  margin-right: 3.2%;
  &:nth-child(3n) {
    margin-right: 0;
  }
  .time-tag {
    position: absolute;
    bottom: 5px;
    left: 1px;
    font-size: 12px;
    color: #fff;
    transform: scale(0.8);
  }
  .tag {
    position: absolute;
    z-index: 1;
    top: 5px;
    right: 10px;
    font-size: 12px;
    color: #fff;
    .flex-row-nowrap(center);
    span {
      margin-left: 5px;
    }
    .cardbofang {
      font-size: 14px;
    }
  }
  .swiper-tag {
    position: absolute;
    bottom: 1rem;
    right: 0.11rem;
    .cardbofang1 {
      font-size: 1rem;
      color: #fff;
      opacity: 0.6;
    }
  }
  .fine-tag {
    position: absolute;
    transform: rotate(-45deg);
    top: 0;
    left: 0;
    .cardhuangguan {
      color: #f39c12;
      font-size: 0.5rem;
    }
  }
  .img-con {
    width: 2.8rem;
    height: 2.8rem;
    position: relative;
    // height: 0;
    background-color: #aaa;
    border-radius: 0.2rem;
    overflow: hidden;
    .shadow {
      position: absolute;
      height: 2.1rem;
      width: 100%;
      box-shadow: 0 15px 21px -9px #777 inset;
    }
    .dj-name {
      position: absolute;
      bottom: 8px;
      left: 8px;
      color: #fff;
      font-size: 0.2rem;
      width: 100%;
      .sl;
    }
    img {
      width: 100%;
    }
  }
  .dec {
    margin-top: 0.2rem;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 1px;
    &.lines {
      .sl;
      height: 18px;
    }
    &.twoLines {
      height: 36px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }
  .artists {
    .sl;
    .artist {
      font-size: 0.2rem;
      color: #aaa;
      &::after {
        content: "/";
      }
      &:last-child::after {
        content: "";
      }
    }
  }
}
</style>